JasmineJS একটি শক্তিশালী জাভাস্ক্রিপ্ট টেস্টিং ফ্রেমওয়ার্ক, যা শুধুমাত্র জাভাস্ক্রিপ্ট কোডের জন্যই নয়, বরং ওয়েব পেজের DOM (Document Object Model) এলিমেন্টের টেস্টিংও করতে সক্ষম। DOM টেস্টিং এর মাধ্যমে আপনি আপনার ওয়েব পেজের HTML এলিমেন্ট, প্রপার্টি, ইন্টারঅ্যাকশন, এবং পরিবর্তনগুলো পরীক্ষা করতে পারেন, যা আপনার টেস্ট কেসের মধ্যে গুরুত্বপূর্ণ।
DOM টেস্টিং এমন এক প্রক্রিয়া, যেখানে আপনি JasmineJS এর মাধ্যমে DOM এলিমেন্টের অবস্থা, ক্লাস, স্টাইল, ইভেন্ট হ্যান্ডলার, অথবা তার পরিবর্তন যাচাই করতে পারেন। এটি নিশ্চিত করতে সহায়তা করে যে আপনার ওয়েব পেজের ইন্টারফেস এবং উপাদান সঠিকভাবে কাজ করছে।
DOM টেস্টিং এর প্রয়োজনীয়তা
DOM টেস্টিং বিশেষভাবে দরকারি যখন:
- ইন্টারঅ্যাকশন চেক করা: যখন ইউজার কোনো DOM এলিমেন্টের সাথে ইন্টারঅ্যাক্ট করে (যেমন, ক্লিক করা, স্ক্রোল করা), তখন আপনি পরীক্ষা করতে চান যে সেগুলি সঠিকভাবে কাজ করছে কিনা।
- এলিমেন্টের অবস্থা পরিবর্তন: DOM-এর কিছু এলিমেন্টের অবস্থা (যেমন, visibility, style) পরিবর্তন হওয়ার পরে তা সঠিকভাবে প্রতিফলিত হচ্ছে কিনা তাও পরীক্ষা করা যায়।
- ইভেন্ট হ্যান্ডলিং: যদি কোনো ইভেন্ট হ্যান্ডলার DOM এলিমেন্টের সাথে যুক্ত থাকে, তবে সেই ইভেন্টের আচরণ পরীক্ষা করা প্রয়োজন।
JasmineJS এ DOM টেস্টিং কিভাবে করবেন?
JasmineJS এ DOM টেস্টিং করার জন্য, আপনি মূলত describe() এবং it() ব্লক ব্যবহার করেন এবং Jasmine এর বিল্ট-ইন ফাংশনগুলি ব্যবহার করে DOM এর অবস্থা যাচাই করেন। JasmineJS নিজে সরাসরি DOM ইন্টারঅ্যাকশন বা DOM পরিবর্তন করতে পারে না, তবে এটি একটি রানটাইম পরিবেশে ব্যবহৃত হতে পারে (যেমন, ব্রাউজারে) এবং আপনাকে DOM সিলেক্ট করতে সহায়তা করতে পারে।
Jasmine এর সাথে DOM টেস্টিং করার জন্য আপনাকে কিছু DOM manipulation করতে হবে, যেমন:
- এলিমেন্ট সিলেকশন (
document.querySelector(),document.getElementById()) - এলিমেন্টের অবস্থা পরীক্ষা করা (
toBe(),toHaveClass(),toHaveStyle()) - ইভেন্ট ট্রিগার করা (
click(),change())
উদাহরণ: DOM এর একটি এলিমেন্ট সিলেকশন এবং পরীক্ষা করা
ধরা যাক, একটি HTML পেজে একটি বাটন রয়েছে এবং আপনি পরীক্ষা করতে চান যে বাটনটি সঠিকভাবে কাজ করছে।
HTML কোড:
<button id="submitBtn">Submit</button>
Jasmine টেস্ট কোড:
describe("DOM Testing with Jasmine", function() {
let button;
beforeEach(function() {
// DOM থেকে বাটন সিলেক্ট করা
button = document.querySelector('#submitBtn');
});
it("should have the correct text content", function() {
// বাটনের টেক্সট কনটেন্ট পরীক্ষা করা
expect(button.textContent).toBe("Submit");
});
it("should have the correct ID", function() {
// বাটনের ID পরীক্ষা করা
expect(button.id).toBe("submitBtn");
});
});
এখানে:
document.querySelector()ব্যবহার করে#submitBtnআইডি সহ বাটনটি সিলেক্ট করা হয়েছে।expect(button.textContent).toBe("Submit")দিয়ে বাটনের টেক্সট কনটেন্ট পরীক্ষা করা হয়েছে।expect(button.id).toBe("submitBtn")দিয়ে বাটনের ID পরীক্ষা করা হয়েছে।
DOM টেস্টিং: এলিমেন্টের ক্লাস এবং স্টাইল পরীক্ষা করা
DOM এলিমেন্টের স্টাইল এবং ক্লাসও পরীক্ষা করা খুবই গুরুত্বপূর্ণ। এখানে আমরা দেখবো কিভাবে আপনি একটি DOM এলিমেন্টের ক্লাস এবং স্টাইল পরীক্ষা করতে পারেন।
উদাহরণ: এলিমেন্টের ক্লাস পরীক্ষা
describe("DOM Testing for Classes", function() {
let divElement;
beforeEach(function() {
// DOM থেকে div এলিমেন্ট সিলেক্ট করা
divElement = document.createElement('div');
divElement.classList.add('active');
document.body.appendChild(divElement);
});
afterEach(function() {
// টেস্টের পরে DOM পরিষ্কার করা
document.body.removeChild(divElement);
});
it("should have the 'active' class", function() {
// div এলিমেন্টে 'active' ক্লাস আছে কিনা তা পরীক্ষা করা
expect(divElement.classList.contains('active')).toBe(true);
});
it("should not have the 'inactive' class", function() {
// div এলিমেন্টে 'inactive' ক্লাস নেই কিনা তা পরীক্ষা করা
expect(divElement.classList.contains('inactive')).toBe(false);
});
});
এখানে:
divElement.classList.add('active')ব্যবহার করেactiveক্লাস যোগ করা হয়েছে।expect(divElement.classList.contains('active')).toBe(true)দিয়ে যাচাই করা হয়েছে যেdivএলিমেন্টেactiveক্লাস রয়েছে।expect(divElement.classList.contains('inactive')).toBe(false)দিয়ে যাচাই করা হয়েছে যেdivএলিমেন্টেinactiveক্লাস নেই।
DOM ইভেন্ট ট্রিগার করা
JasmineJS এ আপনি DOM ইভেন্ট যেমন ক্লিক, চেঞ্জ ইত্যাদি ট্রিগার করতে পারেন, এবং পরীক্ষা করতে পারেন যে ইভেন্টটি সঠিকভাবে কাজ করছে কিনা।
উদাহরণ: বাটনে ক্লিক ইভেন্ট পরীক্ষা
describe("DOM Testing for Events", function() {
let button;
let clicked = false;
beforeEach(function() {
// বাটন এলিমেন্ট তৈরি করা
button = document.createElement('button');
button.textContent = 'Click me';
button.addEventListener('click', function() {
clicked = true;
});
document.body.appendChild(button);
});
afterEach(function() {
// টেস্টের পরে DOM পরিষ্কার করা
document.body.removeChild(button);
});
it("should trigger click event", function() {
// বাটনে ক্লিক ইভেন্ট ট্রিগার করা
button.click();
// যাচাই করা হচ্ছে যে ক্লিক ইভেন্টটি ট্রিগার হয়েছে কিনা
expect(clicked).toBe(true);
});
});
এখানে:
button.addEventListener('click', function() { clicked = true; }): বাটনে ক্লিক ইভেন্ট হ্যান্ডলার যোগ করা হয়েছে।button.click(): বাটনে ক্লিক ইভেন্ট ট্রিগার করা হয়েছে।expect(clicked).toBe(true): যাচাই করা হয়েছে যেclickedভেরিয়েবলtrueহয়ে গেছে, যা ইভেন্টের ট্রিগার হওয়া নির্দেশ করে।
সারাংশ
JasmineJS এ DOM টেস্টিং করতে গেলে আপনি বিভিন্ন DOM এলিমেন্টের অবস্থা, ক্লাস, স্টাইল, এবং ইভেন্টগুলি পরীক্ষা করতে পারেন। JasmineJS সরাসরি DOM এর সাথে ইন্টারঅ্যাক্ট করতে না পারলেও, এটি ব্রাউজার পরিবেশে চালানোর সময় DOM এর এলিমেন্ট সিলেকশন, অবস্থা পরীক্ষা, এবং ইভেন্ট ট্রিগারিং ইত্যাদি করতে সক্ষম। JasmineJS এর মাধ্যমে DOM টেস্টিং আপনার ওয়েব পেজের UI এবং ইন্টারফেসের সঠিকতা নিশ্চিত করার একটি শক্তিশালী উপায়।
JasmineJS শুধুমাত্র JavaScript কোডের টেস্টিং করতে ব্যবহৃত হয় না, এটি DOM elements (ডকুমেন্ট অবজেক্ট মডেল এলিমেন্টস) এর টেস্টিংও করতে পারে। DOM manipulation এবং interactions চেক করার জন্য Jasmine-এর সাথে browser environment (যেমন, Chrome, Firefox) বা headless browser (যেমন, PhantomJS) ব্যবহার করা হয়। Jasmine এর beforeEach() এবং afterEach() ফাংশন ব্যবহার করে DOM এ পরিবর্তন আনা, ইভেন্ট হ্যান্ডলিং করা, বা DOM থেকে মান সংগ্রহ করা খুব সহজে টেস্ট করা সম্ভব।
এই টিউটোরিয়ালে, আমরা আলোচনা করব কিভাবে JasmineJS ব্যবহার করে DOM elements এর টেস্টিং করা যায়।
DOM Elements এর টেস্টিং কেন গুরুত্বপূর্ণ?
DOM elements এর টেস্টিং মূলত আপনার ওয়েবপেজ বা অ্যাপ্লিকেশনের UI (User Interface) এর কার্যকারিতা যাচাই করার জন্য প্রয়োজনীয়। এতে আপনি নিশ্চিত হতে পারেন:
- DOM এলিমেন্টগুলোর সঠিক উপস্থিতি
- ইভেন্ট হ্যান্ডলারের সঠিক কার্যকারিতা
- DOM manipulation সঠিকভাবে হচ্ছে কি না
JasmineJS এর মাধ্যমে এই সমস্ত বিষয় খুব সহজেই পরীক্ষা করা সম্ভব।
DOM Elements টেস্টিং এর জন্য JasmineJS এর ব্যবহার
JasmineJS এ DOM manipulation এর টেস্টিং করার জন্য সাধারণত beforeEach(), afterEach(), এবং it() ব্লক ব্যবহার করা হয়, যাতে টেস্ট চলাকালীন DOM ম্যানিপুলেশন এবং অবজেক্ট চেক করা যায়।
DOM Elements টেস্টিং এর উদাহরণ
১. DOM এলিমেন্ট এর উপস্থিতি পরীক্ষা
ধরা যাক, আমাদের একটি HTML পেজে একটি div এলিমেন্ট রয়েছে এবং আমরা সেটির উপস্থিতি যাচাই করতে চাই।
HTML কোড:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jasmine Test Example</title>
</head>
<body>
<div id="container"></div>
<script src="app.js"></script>
</body>
</html>
JavaScript কোড (app.js):
function addElement() {
const div = document.createElement('div');
div.id = 'newElement';
document.getElementById('container').appendChild(div);
}
Jasmine টেস্ট:
describe("DOM Element Testing", function() {
beforeEach(function() {
// HTML কোডে container এর সাথে একটি নতুন div যুক্ত করা
document.body.innerHTML = '<div id="container"></div>';
});
it("should add a new div element inside container", function() {
// addElement() ফাংশন কল করা
addElement();
// 'newElement' এর উপস্থিতি পরীক্ষা করা
const newDiv = document.getElementById('newElement');
expect(newDiv).not.toBeNull(); // div এলিমেন্টটি DOM-এ আছে কিনা তা যাচাই করা
});
});
এখানে:
beforeEach()ব্লকে DOM তৈরি বা সেটআপ করা হচ্ছে।it()ব্লকেaddElement()ফাংশন কল করা হচ্ছে এবং যাচাই করা হচ্ছে যে নতুন div উপাদানটি সঠিকভাবেcontainerএর মধ্যে যুক্ত হয়েছে কিনা।
২. DOM Elements এর মান পরিবর্তন এবং যাচাই
ধরা যাক, একটি input ফিল্ড আছে এবং আপনি তার মান পরিবর্তন করতে চান। এরপর যাচাই করতে হবে যে ফিল্ডের মান ঠিকঠাক পরিবর্তিত হয়েছে কিনা।
HTML কোড:
<input type="text" id="nameInput" value="Old Name">
JavaScript কোড:
function changeInputValue() {
const input = document.getElementById('nameInput');
input.value = 'New Name';
}
Jasmine টেস্ট:
describe("Change input value", function() {
beforeEach(function() {
// HTML-এ একটি input ফিল্ড তৈরি করা
document.body.innerHTML = '<input type="text" id="nameInput" value="Old Name">';
});
it("should change the input value", function() {
// changeInputValue() ফাংশন কল করা
changeInputValue();
// 'nameInput' এর মান যাচাই করা
const input = document.getElementById('nameInput');
expect(input.value).toBe('New Name');
});
});
এখানে:
beforeEach()ব্লকেinputফিল্ড তৈরি করা হচ্ছে।changeInputValue()ফাংশন কল করার পর যাচাই করা হচ্ছে যেinputফিল্ডের মান সঠিকভাবে পরিবর্তিত হয়েছে।
৩. DOM ইভেন্ট হ্যান্ডলিং টেস্ট
JasmineJS আপনাকে DOM ইভেন্ট যেমন click, keyup, mouseover ইত্যাদি টেস্ট করতে দেয়। এই টেস্টিংয়ের মাধ্যমে আপনি নিশ্চিত হতে পারেন যে আপনার ইভেন্ট হ্যান্ডলার ঠিকভাবে কাজ করছে।
HTML কোড:
<button id="myButton">Click Me</button>
JavaScript কোড:
function handleClick() {
const button = document.getElementById('myButton');
button.innerText = 'Clicked';
}
document.getElementById('myButton').addEventListener('click', handleClick);
Jasmine টেস্ট:
describe("Event Handler Testing", function() {
beforeEach(function() {
// HTML-এ একটি button তৈরি করা
document.body.innerHTML = '<button id="myButton">Click Me</button>';
});
it("should change button text when clicked", function() {
// Button এ ক্লিক করা হচ্ছে
const button = document.getElementById('myButton');
button.click();
// Button এর innerText যাচাই করা
expect(button.innerText).toBe('Clicked');
});
});
এখানে:
beforeEach()ব্লকেbuttonএলিমেন্ট তৈরি করা হচ্ছে।button.click()এর মাধ্যমেclickইভেন্ট ট্রিগার করা হচ্ছে এবং তারপর যাচাই করা হচ্ছে যে বাটনের টেক্সট পরিবর্তন হয়েছে কিনা।
Jasmine এর DOM ম্যানিপুলেশন টেস্টিং সম্পর্কিত কিছু গুরুত্বপূর্ণ পয়েন্ট
document.body.innerHTMLব্যবহার করে DOM Setup: Jasmine এ সাধারণতbeforeEach()ব্লক ব্যবহার করে DOM সঠিকভাবে সেটআপ করা হয়।document.body.innerHTMLদিয়ে আপনি HTML কন্টেন্টকে সিম্পল করে প্রতিটি টেস্টের জন্য তৈরি করতে পারেন।- DOM এর সঙ্গে ইন্টারঅ্যাকশন: Jasmine এ DOM manipulation টেস্ট করার সময় সাধারণত
document.getElementById()বা অন্যান্য DOM সিলেক্টর ব্যবহার করা হয়। তবে, যদি আপনাকে জাভাস্ক্রিপ্টের ইভেন্ট হ্যান্ডলার চেক করতে হয়, তবে আপনিclick(),focus(),blur()ইত্যাদি ইভেন্ট ট্রিগার করতে পারেন। afterEach()দিয়ে DOM ক্লিনআপ:afterEach()ব্লক ব্যবহার করে টেস্ট শেষে DOM এলিমেন্ট বা অবজেক্ট গুলো ক্লিনআপ করা যেতে পারে, যাতে পরবর্তী টেস্টের জন্য সমস্যা না হয়।
সারাংশ
JasmineJS DOM টেস্টিং এর জন্য একটি শক্তিশালী টুল, যা আপনাকে DOM এলিমেন্টের উপস্থিতি, মান পরিবর্তন এবং ইভেন্ট হ্যান্ডলিং পরীক্ষা করতে সহায়তা করে। beforeEach() এবং afterEach() ব্লকগুলো ব্যবহার করে DOM কে সেটআপ এবং ক্লিনআপ করা হয়, এবং click(), innerText, value ইত্যাদি ব্যবহার করে DOM এর বিভিন্ন কার্যকারিতা পরীক্ষা করা হয়। JasmineJS আপনাকে ওয়েবপেজের UI এর সঠিক কার্যকারিতা নিশ্চিত করতে সক্ষম করে।
JasmineJS সাধারণত JavaScript টেস্টিং ফ্রেমওয়ার্ক হিসেবে পরিচিত, তবে এটি HTML এবং CSS এর সাথে ইন্টিগ্রেশন করে ফ্রন্ট-এন্ড টেস্টিংও করতে পারে। HTML এবং CSS এর সাথে JasmineJS ব্যবহার করা হলে আপনি শুধু JavaScript ফাংশন বা মেথডই পরীক্ষা করবেন না, বরং UI উপাদান, DOM (Document Object Model) ম্যানিপুলেশন এবং স্টাইল সম্পর্কিত বৈশিষ্ট্যও টেস্ট করতে পারবেন।
এটি সাধারণত ব্রাউজারে চলমান JavaScript কোডের ফাংশনালিটি এবং এর UI পারফরম্যান্স পরীক্ষার জন্য ব্যবহৃত হয়। এখানে আমরা দেখব কীভাবে JasmineJS এর মাধ্যমে HTML এবং CSS এর সাথে ইন্টিগ্রেশন করা যায় এবং কিছু সাধারণ টেস্টিং পদ্ধতি।
HTML এবং CSS টেস্টিংয়ের জন্য JasmineJS সেটআপ
JasmineJS সাধারণত node.js এর পরিবেশে ইনস্টল করা হয়, তবে ব্রাউজারেও এটি ব্যবহার করা যেতে পারে। HTML ও CSS এর সাথে ইন্টিগ্রেশন করার জন্য আপনার Jasmine এর SpecRunner.html ফাইল ব্যবহার করতে হবে।
JasmineJS ইনস্টলেশন
প্রথমে JasmineJS ইনস্টল করতে হবে যদি না করা থাকে:
npm install --save-dev jasmine
এবার JasmineJS সেটআপ করুন, যেটি আপনাকে HTML এবং CSS এর সাথে ইন্টিগ্রেটেড টেস্ট তৈরি করতে সহায়তা করবে।
HTML এবং CSS টেস্টিংয়ের জন্য JasmineJS কনফিগারেশন
JasmineJS এর মাধ্যমে HTML এবং CSS এর টেস্টিং করার জন্য প্রথমে SpecRunner.html ফাইল তৈরি করতে হবে যেখানে আপনি আপনার JasmineJS টেস্টিং ফাইল, HTML ফাইল এবং CSS ফাইলগুলো ইনক্লুড করবেন।
SpecRunner.html এর উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jasmine Test</title>
<link rel="stylesheet" href="style.css"> <!-- CSS ফাইল ইনক্লুড -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jasmine-core@3.10.0/lib/jasmine-core/jasmine.js"></script> <!-- JasmineJS ইনক্লুড -->
<script src="https://cdn.jsdelivr.net/npm/jasmine-core@3.10.0/lib/jasmine-core/jasmine-html.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jasmine-core@3.10.0/lib/jasmine-core/boot.js"></script>
<script src="spec.js"></script> <!-- Jasmine টেস্ট ফাইল -->
</head>
<body>
<div id="testDiv" class="hiddenDiv">Hello Jasmine!</div>
<button id="toggleBtn">Toggle Visibility</button>
</body>
</html>
এখানে:
style.css: CSS ফাইল যেটি আপনি টেস্ট করার জন্য ব্যবহার করতে চান।spec.js: Jasmine টেস্টিং ফাইল যেখানে আপনি JavaScript কোডের টেস্টিং করবেন।
HTML এবং CSS টেস্ট করার জন্য JasmineJS টেস্ট কেস
JasmineJS ব্যবহার করে HTML এবং CSS টেস্ট করার সময়, আপনি DOM ম্যানিপুলেশন, CSS ক্লাস পরিবর্তন, স্টাইল পরিবর্তন ইত্যাদি পরীক্ষা করতে পারবেন। নিচে কিছু সাধারণ টেস্ট কেস দেখানো হলো।
উদাহরণ ১: DOM ম্যানিপুলেশন টেস্ট
ধরা যাক, আপনার একটি বাটন আছে যা ক্লিক করলে একটি div এলিমেন্টের দৃশ্যমানতা পরিবর্তন করবে।
HTML (উপরের SpecRunner.html ফাইলেই অন্তর্ভুক্ত):
<button id="toggleBtn">Toggle Visibility</button>
<div id="testDiv" class="hiddenDiv">Hello Jasmine!</div>
CSS (style.css):
.hiddenDiv {
display: none;
}
.visibleDiv {
display: block;
}
Jasmine টেস্ট (spec.js):
describe("DOM manipulation tests", function() {
it("should hide the div initially", function() {
const div = document.getElementById("testDiv");
expect(div.style.display).toBe("none"); // div শুরুতে hiddenDiv ক্লাসের সাথে hidden অবস্থায় থাকবে
});
it("should toggle the visibility of the div when button is clicked", function() {
const button = document.getElementById("toggleBtn");
const div = document.getElementById("testDiv");
button.click(); // বাটন ক্লিক করা হচ্ছে
expect(div.style.display).toBe("block"); // div দৃশ্যমান হবে
button.click(); // আবার বাটন ক্লিক করা হচ্ছে
expect(div.style.display).toBe("none"); // div আবার hidden হবে
});
});
এখানে, button.click() দিয়ে আপনি DOM-এ ম্যানিপুলেশন পরীক্ষা করছেন এবং expect() দিয়ে CSS স্টাইল চেক করছেন যে এটি সঠিকভাবে পরিবর্তিত হচ্ছে কিনা।
CSS স্টাইল টেস্টিং
JasmineJS দিয়ে CSS স্টাইল পরীক্ষা করার জন্য, আপনি style প্রপার্টি দিয়ে কোনো HTML এলিমেন্টের স্টাইল পরীক্ষা করতে পারেন।
উদাহরণ ২: CSS ক্লাস পরিবর্তন টেস্ট
ধরা যাক, আপনার একটি ফাংশন আছে যা কোনো বিশেষ অবস্থায় একটি CSS ক্লাস পরিবর্তন করে।
HTML:
<button id="changeStyleBtn">Change Style</button>
<div id="testDiv">This is a test div.</div>
CSS:
.redBackground {
background-color: red;
}
Jasmine টেস্ট:
describe("CSS class manipulation", function() {
it("should add 'redBackground' class when button is clicked", function() {
const button = document.getElementById("changeStyleBtn");
const div = document.getElementById("testDiv");
button.addEventListener("click", function() {
div.classList.add("redBackground");
});
button.click(); // বাটন ক্লিক করা হচ্ছে
expect(div.classList.contains("redBackground")).toBe(true); // div এর classList-এ redBackground চেক করা হচ্ছে
});
});
এখানে, classList.contains() ব্যবহার করা হচ্ছে যে div এলিমেন্টে সঠিক CSS ক্লাস যুক্ত হয়েছে কিনা তা যাচাই করতে।
সারাংশ
JasmineJS এর মাধ্যমে আপনি HTML এবং CSS এর সাথে ইন্টিগ্রেশন করে ফ্রন্ট-এন্ড টেস্টিং করতে পারেন। এতে আপনি:
- DOM ম্যানিপুলেশন পরীক্ষা করতে পারেন,
- CSS ক্লাস পরিবর্তন এবং স্টাইল পরিবর্তন চেক করতে পারেন,
- JavaScript কোডের সাথে HTML এবং CSS এর পারফরম্যান্স এবং আচরণ যাচাই করতে পারেন।
JasmineJS ব্যবহার করে ফ্রন্ট-এন্ড ডেভেলপমেন্টের সময় আপনার UI উপাদানগুলোর কার্যকারিতা এবং উপস্থাপনা সঠিকভাবে পরীক্ষা করা যায়।
JasmineJS এ DOM manipulation এবং events টেস্টিং করার জন্য কিছু বিশেষ কৌশল রয়েছে। আপনি যখন ওয়েব পেজে DOM উপাদানগুলো পরিবর্তন করেন বা ইভেন্ট হ্যান্ডলার দিয়ে কোনো ইন্টারঅ্যাকশন পরিচালনা করেন, তখন সেই কার্যাবলীকে সঠিকভাবে টেস্ট করা প্রয়োজন। JasmineJS এ এই ধরনের টেস্ট তৈরি করতে হলে আপনাকে DOM এবং events এর সাথে যোগাযোগ করার জন্য কিছু স্পেসিফিক টেকনিক ব্যবহার করতে হবে। নিচে এই বিষয়গুলো নিয়ে বিস্তারিত আলোচনা করা হল।
DOM Manipulation এর জন্য টেস্ট তৈরি করা
DOM (Document Object Model) এর মাধ্যমে পেজের কন্টেন্ট পরিবর্তন বা নিয়ন্ত্রণ করা হয়। JasmineJS এ DOM manipulation টেস্ট করার জন্য document.createElement(), innerHTML, এবং querySelector() এর মতো DOM ম্যানিপুলেশন পদ্ধতি ব্যবহার করা যেতে পারে।
উদাহরণ: DOM Manipulation টেস্ট
ধরা যাক, আমাদের একটি ফাংশন আছে যা একটি নতুন প্যারাগ্রাফ তৈরি করে এবং সেটা ওয়েব পেজে যুক্ত করে।
function addParagraph() {
const newParagraph = document.createElement('p');
newParagraph.textContent = "This is a new paragraph.";
document.body.appendChild(newParagraph);
}
এখন, আমরা এই ফাংশনের জন্য JasmineJS এ টেস্ট তৈরি করব।
describe("DOM Manipulation", function() {
it("should add a new paragraph to the body", function() {
// টেস্টের আগে DOM সাফ করা
document.body.innerHTML = '';
// ফাংশন কল
addParagraph();
// প্যারাগ্রাফ যোগ হয়েছে কিনা চেক করা
const paragraph = document.querySelector('p');
expect(paragraph).not.toBeNull();
expect(paragraph.textContent).toBe("This is a new paragraph.");
});
});
এখানে:
document.createElement(): একটি নতুন HTML উপাদান তৈরি করা হয়।document.body.appendChild(): নতুন উপাদানটিbodyতে যোগ করা হয়।document.querySelector(): পেজে প্যারাগ্রাফটি রয়েছে কিনা তা যাচাই করা হয়।
এই টেস্টটি নিশ্চিত করবে যে addParagraph() ফাংশনটি সঠিকভাবে একটি নতুন প্যারাগ্রাফ যোগ করেছে।
Events এর জন্য টেস্ট তৈরি করা
JasmineJS এ events টেস্ট করার জন্য আপনাকে ডোম ইভেন্টের সাথে ইন্টারঅ্যাক্ট করতে হবে, যেমন click(), keydown(), change() ইত্যাদি। JasmineJS সরাসরি ইভেন্ট ফায়ার করতে বা ইভেন্ট হ্যান্ডলারগুলোর কার্যকারিতা যাচাই করতে dispatchEvent() বা Event() এর মতো মেথড ব্যবহার করতে পারে।
উদাহরণ: Event Handling টেস্ট
ধরা যাক, আমাদের একটি বাটন আছে, যার সাথে একটি ইভেন্ট হ্যান্ডলার সংযুক্ত রয়েছে যা ক্লিক করার পর একটি প্যারাগ্রাফ তৈরি করে।
<button id="addButton">Add Paragraph</button>
এবং জাভাস্ক্রিপ্ট কোড:
document.getElementById('addButton').addEventListener('click', function() {
const newParagraph = document.createElement('p');
newParagraph.textContent = "This is a new paragraph added by button click.";
document.body.appendChild(newParagraph);
});
এখন, আমরা একটি Jasmine টেস্ট তৈরি করব, যা এই ক্লিক ইভেন্টটি সিমুলেট করবে এবং যাচাই করবে যে প্যারাগ্রাফটি সঠিকভাবে তৈরি হয়েছে কিনা।
describe("Event Handling", function() {
it("should add a new paragraph when the button is clicked", function() {
// টেস্টের আগে DOM সাফ করা
document.body.innerHTML = '<button id="addButton">Add Paragraph</button>';
// বাটনে ক্লিক করার জন্য ইভেন্ট ডিপ্যাচ করা
const button = document.getElementById('addButton');
button.click();
// প্যারাগ্রাফটি DOM এ যোগ হয়েছে কিনা তা যাচাই করা
const paragraph = document.querySelector('p');
expect(paragraph).not.toBeNull();
expect(paragraph.textContent).toBe("This is a new paragraph added by button click.");
});
});
এখানে:
button.click(): এটি ক্লিক ইভেন্টকে সিমুলেট করে, যা পেজে ইভেন্ট হ্যান্ডলারকে ট্রিগার করবে।document.querySelector(): এটি DOM এ প্যারাগ্রাফটি সঠিকভাবে যোগ হয়েছে কিনা তা যাচাই করে।
এই টেস্টটি নিশ্চিত করবে যে, বাটনে ক্লিক করার পর প্যারাগ্রাফ সঠিকভাবে তৈরি হয়।
Complex Event Handling এর টেস্টিং
কখনো কখনো ইভেন্টগুলি বেশ জটিল হতে পারে, যেখানে একাধিক ইভেন্ট হ্যান্ডলার বা কাস্টম ইভেন্ট ট্রিগার করা হয়। এই ধরনের পরিস্থিতিতে spyOn() এবং Event() ব্যবহার করা যেতে পারে।
উদাহরণ: Complex Event Handling
ধরা যাক, আমাদের একটি টেক্সট বক্স আছে এবং আমরা চাই, যখন ব্যবহারকারী কোনো ভ্যালিড ইনপুট দেয় তখন একটি আলাদা ক্লাস যুক্ত হবে এবং এটি একটি কাস্টম ইভেন্ট ট্রিগার করবে।
<input id="inputBox" type="text">
এবং জাভাস্ক্রিপ্ট কোড:
const inputBox = document.getElementById('inputBox');
inputBox.addEventListener('input', function() {
if (inputBox.value.length > 5) {
inputBox.classList.add('valid');
const event = new CustomEvent('validInput', { detail: inputBox.value });
inputBox.dispatchEvent(event);
}
});
এখন, এই কাস্টম ইভেন্ট এবং DOM পরিবর্তন টেস্ট করা যাবে।
describe("Complex Event Handling", function() {
it("should add a 'valid' class and dispatch a 'validInput' event", function() {
document.body.innerHTML = '<input id="inputBox" type="text">';
const inputBox = document.getElementById('inputBox');
// spyOn ব্যবহার করে ইভেন্ট হ্যান্ডলার ট্র্যাক করা
spyOn(inputBox, 'dispatchEvent');
// ইনপুট প্রদান করা
inputBox.value = "Hello World";
inputBox.dispatchEvent(new Event('input'));
// ক্লাস যুক্ত হয়েছে কিনা চেক করা
expect(inputBox.classList.contains('valid')).toBeTrue();
// কাস্টম ইভেন্ট dispatch হয়েছে কিনা চেক করা
expect(inputBox.dispatchEvent).toHaveBeenCalled();
expect(inputBox.dispatchEvent).toHaveBeenCalledWith(jasmine.objectContaining({
type: 'validInput',
detail: 'Hello World'
}));
});
});
এখানে:
spyOn(): এটি একটি স্পাই তৈরি করে, যা ইভেন্ট হ্যান্ডলারের কল বা dispatching মনিটর করে।CustomEvent(): এটি একটি কাস্টম ইভেন্ট তৈরি করে যা বিশেষ তথ্য (detail) বহন করে।expect(): এটি চেক করে যে ক্লাস যোগ করা হয়েছে কিনা এবং কাস্টম ইভেন্টটি সঠিকভাবে dispatch করা হয়েছে কিনা।
সারাংশ
JasmineJS এ DOM manipulation এবং events এর জন্য টেস্ট তৈরি করার জন্য আপনি নিম্নলিখিত কৌশল ব্যবহার করতে পারেন:
- DOM Manipulation: DOM উপাদান তৈরি, পরিবর্তন বা মুছে ফেলা এবং সেগুলি যাচাই করা।
- Events: DOM ইভেন্ট সিমুলেট করা এবং সেগুলি সঠিকভাবে ট্রিগার হওয়ার পর সঠিক ফলাফল যাচাই করা।
- spyOn(): ইভেন্ট হ্যান্ডলার বা ফাংশনের কল ট্র্যাক করা।
- CustomEvent(): কাস্টম ইভেন্ট তৈরি করে DOM এ ইভেন্ট ডিসপ্যাচ করা।
এই কৌশলগুলো অনুসরণ করে আপনি JasmineJS এর মাধ্যমে DOM manipulation এবং event handling এর কার্যকারিতা সঠিকভাবে টেস্ট করতে পারবেন।
jQuery হলো একটি জনপ্রিয় JavaScript লাইব্রেরি যা DOM ম্যানিপুলেশন, ইভেন্ট হ্যান্ডলিং, অ্যাজাক্স এবং এনিমেশনসহ অন্যান্য কার্যকারিতা সহজ করে তোলে। JasmineJS দিয়ে jQuery এর সাথে টেস্টিং করতে হলে, আপনাকে DOM এর সাথে সম্পর্কিত কিছু কার্যাবলী সঠিকভাবে পরীক্ষা করতে হবে, যেমন ইভেন্ট হ্যান্ডলার, DOM ম্যানিপুলেশন, অ্যাজাক্স রিকোয়েস্ট ইত্যাদি।
JasmineJS এর সাথে jQuery ব্যবহারের ক্ষেত্রে কিছু কৌশল এবং টিপস রয়েছে যা আপনাকে jQuery এর ফাংশনালিটিকে টেস্ট করতে সাহায্য করবে।
jQuery টেস্টিংয়ে JasmineJS ব্যবহার
JasmineJS সাধারণত JavaScript ফাংশনালিটি টেস্ট করার জন্য ব্যবহৃত হলেও, jQuery কে টেস্ট করতে আপনাকে কিছু DOM সম্পর্কিত কার্যাবলী যেমন beforeEach(), afterEach(), spyOn() ইত্যাদি ব্যবহার করতে হবে।
1. jQuery এর DOM ম্যানিপুলেশন টেস্ট করা
jQuery এর মাধ্যমে আপনি DOM এ যে কোনো এলিমেন্টের কন্টেন্ট বা প্রপার্টি পরিবর্তন করতে পারেন। JasmineJS এর সাথে jQuery এর DOM ম্যানিপুলেশন টেস্ট করা যায়।
উদাহরণ:
describe("jQuery DOM manipulation", function() {
let $element;
beforeEach(function() {
// DOM এ একটি নতুন element তৈরি করা
$element = $("<div id='test'>Hello</div>");
$("body").append($element); // body তে element যুক্ত করা
});
afterEach(function() {
$element.remove(); // টেস্ট শেষ হলে DOM থেকে element মুছে ফেলা
});
it("should change the text of an element", function() {
$element.text("Goodbye");
expect($element.text()).toBe("Goodbye");
});
});
এখানে:
beforeEach(): টেস্টের আগে একটিdivট্যাগ তৈরি এবংbodyতে অ্যাপেন্ড করা হয়েছে।afterEach(): টেস্ট শেষে DOM থেকে এলিমেন্টটি মুছে ফেলা হয়েছে।expect(): jQuery এর.text()ফাংশন ব্যবহার করে টেক্সট চেক করা হয়েছে।
2. jQuery ইভেন্ট হ্যান্ডলিং টেস্ট করা
jQuery ইভেন্ট হ্যান্ডলিং টেস্ট করা JasmineJS এর মাধ্যমে সহজ হতে পারে। আপনি trigger() ফাংশন ব্যবহার করে কোনো ইভেন্ট ট্রিগার করতে পারেন এবং তারপর সেই ইভেন্টের প্রতিক্রিয়া পরীক্ষা করতে পারেন।
উদাহরণ:
describe("jQuery Event Handling", function() {
let $button;
beforeEach(function() {
$button = $("<button>Click Me</button>");
$("body").append($button);
});
afterEach(function() {
$button.remove();
});
it("should trigger a click event", function() {
let clicked = false;
$button.on("click", function() {
clicked = true;
});
$button.trigger("click"); // click ইভেন্ট ট্রিগার করা
expect(clicked).toBe(true); // চেক করা হচ্ছে যে ক্লিক ইভেন্ট হয়েছে কিনা
});
});
এখানে:
$button.on("click", function()): একটি ক্লিক ইভেন্ট হ্যান্ডলার যোগ করা হয়েছে।$button.trigger("click"): ক্লিক ইভেন্ট ট্রিগার করা হয়েছে।expect(): টেস্ট করা হয়েছে যে, ইভেন্ট ট্রিগার করার পরclickedভেরিয়েবলটিtrueহয়ে গেছে।
3. jQuery অ্যাজাক্স টেস্টিং
যখন আপনি jQuery দিয়ে অ্যাজাক্স রিকোয়েস্ট করেন, JasmineJS ব্যবহার করে আপনি সেই রিকোয়েস্টের ফলাফল পরীক্ষা করতে পারেন। spyOn() ফাংশনটি ব্যবহৃত হয় jQuery এর অ্যাজাক্স মেথডের ওপর স্পাই করতে।
উদাহরণ:
describe("jQuery AJAX", function() {
it("should make an AJAX request", function(done) {
spyOn($, "ajax").and.callFake(function(options) {
options.success({ data: "test" }); // মক সাকসেস কলব্যাক
});
$.ajax({
url: "https://api.example.com/data",
success: function(response) {
expect(response.data).toBe("test");
done(); // done() কল করে Jasmine কে জানানো হয়েছে টেস্ট শেষ হয়েছে
}
});
});
});
এখানে:
spyOn($, "ajax"): jQuery এরajaxমেথডের ওপর স্পাই করা হয়েছে এবং মক (mock) করা হয়েছে।and.callFake(): এখানেcallFake()দিয়ে একটি কৃত্রিম সাকসেস রেসপন্স তৈরি করা হয়েছে।done():done()কল করা হয়েছে asynchronous টেস্ট শেষ করার জন্য।
4. jQuery টেস্টিংয়ে DOM পরিবর্তন সঠিকভাবে আপডেট হচ্ছে কিনা চেক করা
কখনও কখনও আপনি চান যে, jQuery এর মাধ্যমে DOM এ কোনো পরিবর্তন ঘটলে তা টেস্টিং এর মাধ্যমে সঠিকভাবে যাচাই করতে।
উদাহরণ:
describe("jQuery DOM updates", function() {
let $div;
beforeEach(function() {
$div = $("<div id='container'></div>");
$("body").append($div);
});
afterEach(function() {
$div.remove();
});
it("should add a new element inside the container", function() {
$div.append("<p>New Paragraph</p>");
expect($div.find("p").length).toBe(1);
});
});
এখানে:
$div.append("<p>New Paragraph</p>"): একটি নতুন প্যারাগ্রাফ ট্যাগ যোগ করা হয়েছে।expect(): পরীক্ষা করা হয়েছে যে,.find("p")মাধ্যমেpট্যাগটি DOM এ ঠিকভাবে যোগ হয়েছে।
5. jQuery এর সিলেক্টর টেস্ট করা
jQuery সিলেক্টর দিয়ে DOM এলিমেন্ট সিলেক্ট করার সময় JasmineJS ব্যবহার করে আপনি নিশ্চিত হতে পারেন যে সিলেক্টরটি সঠিকভাবে কাজ করছে কিনা।
উদাহরণ:
describe("jQuery Selector", function() {
let $div;
beforeEach(function() {
$div = $("<div class='test'>Test</div>");
$("body").append($div);
});
afterEach(function() {
$div.remove();
});
it("should select the correct element by class", function() {
const $selected = $(".test");
expect($selected.length).toBe(1);
});
});
এখানে:
$(".test"): jQuery সিলেক্টর ব্যবহার করে.testক্লাস বিশিষ্ট এলিমেন্ট সিলেক্ট করা হয়েছে।expect():.testক্লাস বিশিষ্ট একটি এলিমেন্ট সিলেক্ট হয়েছে কিনা তা পরীক্ষা করা হয়েছে।
সারাংশ
jQuery এর সাথে JasmineJS ব্যবহার করে আপনি সহজেই DOM ম্যানিপুলেশন, ইভেন্ট হ্যান্ডলিং, অ্যাজাক্স রিকোয়েস্ট, এবং সিলেক্টর টেস্ট করতে পারেন। JasmineJS এর spyOn(), beforeEach(), afterEach(), এবং expect() ফাংশনগুলি jQuery কোডের কার্যকারিতা সঠিকভাবে পরীক্ষা করতে সাহায্য করে। এই কৌশলগুলির মাধ্যমে আপনি jQuery ভিত্তিক অ্যাপ্লিকেশনগুলির জন্য শক্তিশালী এবং নির্ভুল টেস্ট কেস তৈরি করতে পারবেন।
Read more
